<template>
	<view class="page">
		<view class="topbar">
			<view class="box">
				<text @click="tojx()">精选文章</text>
				<text @click="tohw()">好物推荐</text>
			</view>
		</view>
		<block v-if="isShow">
			<view class="icon">
				<view v-for="item in kindList" :key="item.id" @click="changekind(item)">
					<image :src="item.icon"></image>
				</view>
			</view>
			<block v-for="item in articleList" :key="item.id">
				<navigator :url="`./article-detail/index?id=` + item.id" class="item">
					<image :src="item.coverImg"></image>
					<view class="txt">{{item.title}}</view>
					<view class="author">{{item.author}}</view>
					<view class="bottom">
						<view class="pic1"><image src="../../static/icons/view.png"></image></view>
						<view class="pic2"><image src="../../static/icons/zan.png"></image></view>
					</view>
				</navigator>
			</block>
		</block>
		<block v-else>
			<view class="haowu" v-for="item in seriesAll" :key="item.id">
				<image :src="item.bg_img"></image>
				<view class="ename">{{item.ename}}</view>
				<view class="cname">{{item.cname}}</view>
			</view>
		</block>
	</view>
</template>

<script>
	import kindApi from '@/api/kind/index.js'
	import findApi from '@/api/find/index.js'
	export default {
		data() {
			return {
				isShow:true,
				kindList:[],
				currentKindId:'1bfad10d58c241c7b919dbb25b3d2043',  
				articleList:[],
				seriesAll:[]
			};
		},
		methods:{
			tojx(){
				this.isShow = true
			},
			tohw(){
				this.isShow = false
			},
			changekind(item){
				console.log(item)
				this.currentKindId = item.id
				this.getAritlceList()
				console.log('点击后获取的列表',this.articleList)
			},
			async getKind() {
				var {
					data
				} = await kindApi.kindList();
				var icons = [
					'../../static/icons/chuangyi.png',
					'../../static/icons/shipin.png',
					'../../static/icons/fengge.png',
					'../../static/icons/dengju.png'
				]
				for (var i = 0; i < data.length; i++) {
					data[i].icon = icons[i];
			
				}
				this.kindList = data;
				this.currentKindId = data[0].id
				this.getAritlceList()
				console.log('页面显示获取的kind列表',this.kindList)
			},
			async getAritlceList() {
				var {
					data
				} = await findApi.articleList({
					kindId: this.currentKindId
				});
				this.articleList = data.list;
				console.log('页面显示时获取的列表',this.articleList)
			},
			async getSeriesAll() {
				var {
					data
				} = await findApi.seriesAll();
				this.seriesAll = data;
				console.log(this.seriesAll)
			},
		},
		onLoad(option){
			this.getKind();
			this.getSeriesAll();
			this.getAritlceList()	
			
		}
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #f1ece7;
	padding-top: 20px;
	.topbar{
		box-sizing: border-box;
		position: fixed;
		left: 0;
		top: 0;
		background-color: #354e44;
		width: 100%;
		height: 44px;
		z-index: 998;
		.box{
			position: absolute;
			left: 50%;
			transform: translate(-50%);
			width: 148px;
			height: 44px;
			line-height: 44px;
			text{
				width: 64px;
				height: 30px;
				text-align: center;
				font-size: 16px;
				margin: 0 5px;
				padding: 5px 0;
				color: #fff;
			}
		}
	}
	.icon{
		display: flex;
		margin-top: 70px;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		height: 42px;
		padding: 0 40px;
		view{
			position: relative;
			width: 42px;
			height: 42px;
			background-color: #fff;
			border-radius: 50%;
			image{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 25px;
				height: 25px;
			}
		}
	}
	.item{
		position: relative;
		width: 337px;
		height: 241px;
		border-radius: 12px;
		background-color: #fff;
		margin: 14px auto;
		overflow: hidden;
		image{
			width: 337px;
			height: 191px;
			position: absolute;
			top: 0;
			left: 0;
		}
		.txt{
			width: 312px;
			height: 65px;
			position: absolute;
			left: 10px;
			top: 112px;
			color: #fff;
			font-size: 20px;
			line-height: 34px;
		}
		.author{
			width: 312px;
			height: 20px;
			position: absolute;
			left: 10px;
			top: 152px;
			color: #fff;
			font-size: 16px;
			line-height: 20px;
		}
		.bottom{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 337px;
			height: 50px;
			background-color: #fff;
			// display: flex;
			// justify-content: space-between;
			.pic1{
				width: 20px;
				height: 20px;
				position: absolute;
				left: 30px;
				top: 50%;
				transform: translate(0,-50%);
				image{
					width: 100%;
					height: 100%;
				}
			}
			.pic2{
				width: 20px;
				height: 20px;
				position: absolute;
				right: 30px;
				top: 50%;
				transform: translate(0,-50%);
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.haowu{
		position: relative;
		image{
			width: 100%;
		}
		.ename{
			position: absolute;
			bottom: 50px;
			left: 20px;
		}
		.cname{
			position: absolute;
			bottom: 20px;
			left: 20px;
		}
	}
}

</style>
